<template>
    <div class="hello-ezuikit-js">
        <div
            :id="monitorId"
            style="width: 25rem; height: 25rem; margin: 0 auto"
        ></div>
    </div>
</template>
<script>
import EZUIKit from "ezuikit-js";
export default {
    name: "EZUIKIT",
    data() {
        return {
            monitor: null,
            monitorId: ""
        };
    },
    props: {
        monitorData: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    watch: {
        monitorData: {
            // deep:true,
            immediate: true,
            handler(newValue, oliValue) {
                console.log(newValue)
                this.monitor = newValue;
                this.monitorId = newValue.id
            },
        },
    },
    computed: {
        accessToken() {},
    },
    mounted() {
        // console.log("拿到", this.monitor);
         let that = this
        this.$nextTick(() => {
                           
                if (that.monitor) {
                    let player = new EZUIKit.EZUIKitPlayer({
                        autoplay: false, //设置是否播放
                        id: that.monitorId,
                        accessToken: that.monitor.accessToken,
                        url: that.monitor.url,
                        template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
                        // 视频上方头部控件
                        header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
                        // 视频下方底部控件
                        // footer: ["hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
                        // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
                        width: 310,
                        height: 280,
                    });
                }
        })
    },
};
</script>
